// {bem_b,bem_e,bem_m,VueAndNvueStyleAttr,when,$namespace}
@use "./mixin/mixins.scss" as *;
@use './mixin/function.scss' as *;

@import "common/index.scss";

$e-popup-flex: 1 !default;
$e-popup-content-background-color: #fff !default;

@include bem_b(popup) {
  flex: $e-popup-flex;
  @include bem_e(content) {
    background-color: $e-popup-content-background-color;
    position: relative;
    @include bem_m(round-top) {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
    }
    @include bem_m(round-left) {
      border-top-left-radius: 0;
      border-top-right-radius: 10px;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 10px;
    }
    @include bem_m(round-right) {
      border-top-left-radius: 10px;
      border-top-right-radius: 0;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 0;
    }
    @include bem_m(round-bottom) {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    @include bem_m(round-center) {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
    }
    &__close {
      position: absolute;

      &--hover {
        opacity: 0.4;
      }
    }

    &__close--top-left {
      top: 15px;
      left: 15px;
    }

    &__close--top-right {
      top: 15px;
      right: 15px;
    }

    &__close--bottom-left {
      bottom: 15px;
      left: 15px;
    }

    &__close--bottom-right {
      right: 15px;
      bottom: 15px;
    }
  }
}
